<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>按钮 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_icon.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_button.css">
	<link rel="stylesheet" href="../../assets/dest/css/util_animation.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>按钮</dd>
			<dt>描述：</dt>
			<dd>按钮</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>basic_icon.css <small>(用于图标按钮)</small></code>
				<code>form_button.css</code>
				<code>util_animation.css, jquery.js, jquery.loadingBtn.js <small>(用于按钮加载中效果)</small></code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h4>链接按钮，点击可跳转页面</h4>
		<a href="http://www.baidu.com" class="o-button o-button-primary" target="_blank">访问百度</a>

		<hr>

		<h4>情景按钮</h4>
		<button class="o-button o-button-normal">
			<span>普通</span>
		</button>
		<button class="o-button o-button-primary">
			<span>主要操作</span>
		</button>
		<button class="o-button o-button-success">
			<span>成功</span>

		</button>
		<button class="o-button o-button-warning">
			<span>警告</span>
		</button>
		<button class="o-button o-button-danger">
			<span>危险</span>
		</button>

		<hr>

		<h4>禁用状态</h4>
		<button class="o-button o-button-normal" disabled>
			<span>普通</span>
		</button>
		<button class="o-button o-button-primary" disabled>
			<span>主要操作</span>
		</button>
		<button class="o-button o-button-success" disabled>
			<span>成功</span>
		</button>
		<button class="o-button o-button-warning" disabled>
			<span>警告</span>
		</button>
		<button class="o-button o-button-danger" disabled>
			<span>危险</span>
		</button>

		<hr>

		<h4>按钮尺寸</h4>
		<button class="o-button o-button-success button-lg">
			<span>大按钮</span>
		</button>
		<button class="o-button o-button-success">
			<span>普通按钮</span>
		</button>
		<button class="o-button o-button-success button-sm">
			<span>小按钮</span>
		</button>
		<button class="o-button o-button-success button-xs">
			<span>超小按钮</span>
		</button>

		<hr>

		<h4 id="iconBtn">图标按钮</h4>
		<button class="o-button o-button-danger button-sm">
			<i class="icon-cog"></i>
		</button>
		<button class="o-button o-button-primary button-sm">
			<i class="icon-edit"></i>
		</button>
		<button class="o-button o-button-warning button-sm">
			<i class="icon-filter"></i>
		</button>
		<button class="o-button o-button-normal button-sm">
			<i class="icon-search"></i>
		</button>
		<button class="o-button o-button-success button-sm">
			<i class="icon-location"></i>
		</button>
		<button class="o-button o-button-danger">
			<i class="icon-cog"></i>
			<span>设置</span>
		</button>
		<button class="o-button o-button-primary">
			<i class="icon-edit"></i>
			<span>编辑</span>

		</button>
		<button class="o-button o-button-warning">
			<i class="icon-filter"></i>
			<span>过滤</span>

		</button>
		<button class="o-button o-button-normal">
			<i class="icon-search"></i>
			<span>搜索</span>

		</button>
		<button class="o-button o-button-success">
			<i class="icon-location"></i>
			<span>发送</span>
		</button>

		<hr>

		<h4 id="loadingBtn">加载中效果<small>（IE10+）</small></h4>
		<pre>通过设置 data-loading=[提示文本] 来显示加载提示，提示文本可为空。</pre>
		<div>
			<code>data-loading="处理中..."</code>
			<button class="o-button o-button-primary" id="demoBtn1" data-loading="处理中...">
				<span>提交</span>
			</button>
		</div>
		<hr>
		<div>
			<code>data-loading="正在删除，请勿关闭"</code>
			<button class="o-button o-button-danger" id="demoBtn2" data-loading="正在删除，请勿关闭">
				<i class="icon-trash-2"></i>
				<span>删除</span>
			</button>
		</div>
		<hr>
		<div>
			<span>含图标按钮，不指定 <code>data-loading</code> 或为空</span>
			<button class="o-button o-button-success" id="demoBtn3">
				<span>下一步</span>
				<i class="icon-arrow-right"></i>
			</button>
		</div>
		<hr>
		<div>
			<span>不含图标按钮，不指定 <code>data-loading</code></span>
			<button class="o-button o-button-success" id="demoBtn4">
				<span>保存</span>
			</button>
		</div>
	</div>
    <script src="../../dist/js/libs/jquery-1.11.3.min.js"></script>
    <script src="../../assets/dest/js/jquery.loadingBtn.js"></script>
    <script>
        $('#demoBtn1').click(function(e) {
            e.preventDefault();
            $(this).loadingBtn(true);
            removeLoading($(this));
		});

		$('#demoBtn2').click(function(e) {
            e.preventDefault();
            $(this).loadingBtn(true);
            removeLoading($(this));
		});

		$('#demoBtn3').click(function(e) {
            e.preventDefault();
            $(this).loadingBtn(true);
            removeLoading($(this));
		});

		$('#demoBtn4').click(function(e) {
            e.preventDefault();
            $(this).loadingBtn('保存中...');
            removeLoading($(this));
		});

        function removeLoading(self) {
            setTimeout(function() {
                self.loadingBtn(false);
            }, 2000);  // 模拟提交耗时
        }
</script>
</body>
</html>
